<template>
  <div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
    <div class="bg-white rounded-xl shadow-2xl p-8 max-w-md w-full transform transition-all duration-500 hover:scale-[1.01]">
      <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-gray-800 mb-2">创建新账户</h1>
        <p class="text-gray-600">填写以下信息注册</p>
      </div>
      
      <form @submit.prevent="register">
        <div class="mb-6">
          <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <i class="fa fa-user text-gray-400"></i>
            </div>
            <input 
              type="text" 
              id="name" 
              v-model="name" 
              class="pl-10 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" 
              placeholder="您的姓名"
              required
            >
          </div>
        </div>
        
        <div class="mb-6">
          <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <i class="fa fa-envelope text-gray-400"></i>
            </div>
            <input 
              type="email" 
              id="email" 
              v-model="email" 
              class="pl-10 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" 
              placeholder="your@email.com"
              required
            >
          </div>
        </div>
        
        <div class="mb-6">
          <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <i class="fa fa-lock text-gray-400"></i>
            </div>
            <input 
              type="password" 
              id="password" 
              v-model="password" 
              class="pl-10 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" 
              placeholder="至少8个字符"
              required
            >
          </div>
        </div>
        
        <div class="mb-6">
          <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <i class="fa fa-lock text-gray-400"></i>
            </div>
            <input 
              type="password" 
              id="confirmPassword" 
              v-model="confirmPassword" 
              class="pl-10 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" 
              placeholder="再次输入密码"
              required
            >
          </div>
        </div>
        
        <div class="flex items-center mb-6">
          <input 
            type="checkbox" 
            id="terms" 
            class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
            required
          >
          <label for="terms" class="ml-2 block text-sm text-gray-700">
            我同意<a href="#" class="text-blue-600 hover:text-blue-500">服务条款</a>和<a href="#" class="text-blue-600 hover:text-blue-500">隐私政策</a>
          </label>
        </div>
        
        <button 
          type="submit" 
          class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
        >
          注册账户
        </button>
      </form>
      
      <div class="mt-6 text-center">
        <p class="text-gray-600">
          已有账户? <router-link to="/login" class="font-medium text-blue-600 hover:text-blue-500">登录</router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../userStore';

// 表单数据
const name = ref('');
const email = ref('');
const password = ref('');
const confirmPassword = ref('');

// 路由实例
const router = useRouter();
const userStore = useUserStore();

// 注册处理函数
const register = () => {
  // 简单验证
  if (!name.value || !email.value || !password.value || !confirmPassword.value) {
    alert('请填写所有字段');
    return;
  }
  
  if (password.value !== confirmPassword.value) {
    alert('两次输入的密码不一致');
    return;
  }
  
  // 注册用户
  const newUser = {
    username: name.value,
    email: email.value,
    password: password.value
  };
  userStore.registerUser(newUser);
  
  // 注册成功后，重定向到登录页
  router.push('/login');
};
</script>

<style scoped>
/* 添加一些过渡动画效果 */
button, .router-link {
  text-decoration: none;
}
</style>